window.onload = function () {
    const canvas = document.getElementById('scence');
    const ctx = canvas.getContext('2d');

    const handleScale = () => {
        const dpr = Math.max(1, window.devicePixelRatio || 1);
        const rect = canvas.getBoundingClientRect();
        // 物理像素尺寸
        canvas.width = Math.floor(rect.width * dpr);
        canvas.height = Math.floor(rect.height * dpr);
        ctx.scale(dpr, dpr);
        const center = rect.width / 2;
        const radius = rect.width * 0.45;
        const lineWidth = Math.max(rect.width * 0.05, 2);
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, rect.width, rect.height);

        ctx.beginPath();
        ctx.arc(center, center, radius, 0, Math.PI * 2);
        ctx.strokeStyle = '#FFF';
        ctx.lineWidth = lineWidth;
        ctx.stroke();
    };

    let resizeId;
    window.addEventListener('resize', () => {
        cancelAnimationFrame(resizeId);
        resizeId = requestAnimationFrame(() => {
            handleScale();
        });
    });

    //初始化
    handleScale();
    window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
        .addEventListener('change', handleScale);
}